<template>
    <van-tabbar :value="index" class="bottom-tab" @change="onIndexChange" active-color="#FEAAAF" inactive-color="#080808">
        <van-tabbar-item v-for="(tab, index) in tabs" :key="index" :name="tab.value" :dot="tab.value === 'user' && orderCount > 0">
            {{tab.text}}
            <template #icon="props">
                <div class="bottom-tab__icon" :style="{'background-image': 'url(' + (props.active ? tab.icon.active : tab.icon.inactive) + ')'}"></div>
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script lang="ts">
import { EMPTY_LIST, ROUTE_NAME } from '@/lib/constant';
import store from '@/store';
import { Component, Prop, Vue } from 'vue-property-decorator';

const tabMapRoute: { [tab: string]: string } = {
    home: ROUTE_NAME.HOME_INDEX,
    vip: ROUTE_NAME.BRIDAL_SHOP_INDEX,
    mall: ROUTE_NAME.MALL_INDEX,
    member: ROUTE_NAME.MEMBER_INDEX,
    user: ROUTE_NAME.USER_HOME,
};

const path = 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/tabbar';

@Component({
    name: 'BottomTab',
})
export default class BottomTab extends Vue {
    @Prop({ type: String }) public value!: string;

    public index = 'home';
    public tabs = [
        {
            text: '首页',
            value: 'home',
            icon: {
                active: `${path}/index_active.png`,
                inactive: `${path}/index.png`,
            },
        },
        {
            text: '门店',
            value: 'vip',
            icon: {
                active: `${path}/store_active.png`,
                inactive: `${path}/store.png`,
            },
        },
        {
            text: '商城',
            value: 'mall',
            icon: {
                active: `${path}/car_active.png`,
                inactive: `${path}/car.png`,
            },
        },
        {
            text: '会员',
            value: 'member',
            icon: {
                active: `${path}/vip_active.png`,
                inactive: `${path}/vip.png`,
            },
        },
        {
            text: '我的',
            value: 'user',
            icon: {
                active: `${path}/my_active.png`,
                inactive: `${path}/my.png`,
            },
        },
    ];

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
    public get orderCount() {
        const wrap = store.state.order.list.init || EMPTY_LIST;
        return wrap.list.length;
    }

    public onIndexChange(index: string) {
        const route = tabMapRoute[index];
        if (route) {
            this.$router.push({
                name: route,
            });
        }
    }

    public created() {
        this.index = this.value;
    }
}
</script>

<style lang="less">

.bottom-tab {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    &__icon {
        width: 23px;
        height: 23px;
        background: center no-repeat;
        background-size: contain;
    }
    .van-tabbar-item__text {
        font-size: 10px;
    }
}
</style>
